import $ from 'jquery'
import * as joint from 'jointjs'
import Element from './element'
import * as cc from '../util/constants'
/**
 * 转置节点
 */
const JointTransposer = joint.shapes.basic.Transposer = joint.shapes.basic.Generic.extend({
    markup: '<g class="rotatable">' +
        `<rect class="background" width="${cc.ELEMENT_WIDTH}" height="${cc.ELEMENT_HEIGHT}" fill="none"/>` +
        '<path class="shadow" d="M51.5,10C49,10,47,12,47,14.5v16c0,2.5,2,4.5,4.5,4.5s4.5-2,4.5-4.5v-16C56,12,54,10,51.5,10z M54,30.5c0,1.4-1.1,2.5-2.5,2.5S49,31.9,49,30.5v-16c0-1.4,1.1-2.5,2.5-2.5s2.5,1.1,2.5,2.5V30.5z"/> ' +
        '<path class="shadow" d="M30.5,10h-2c-1.9,0-3.5,1.6-3.5,3.5s1.6,3.5,3.5,3.5h2c1.9,0,3.5-1.6,3.5-3.5S32.4,10,30.5,10z M30.5,15h-2c-0.8,0-1.5-0.7-1.5-1.5s0.7-1.5,1.5-1.5h2c0.8,0,1.5,0.7,1.5,1.5S31.3,15,30.5,15z"/> ' +
        '<path class="shadow" d="M41.5,10h-2c-1.9,0-3.5,1.6-3.5,3.5s1.6,3.5,3.5,3.5h2c1.9,0,3.5-1.6,3.5-3.5S43.4,10,41.5,10z M41.5,15h-2c-0.8,0-1.5-0.7-1.5-1.5s0.7-1.5,1.5-1.5h2c0.8,0,1.5,0.7,1.5,1.5S42.3,15,41.5,15z"/> ' +
        '<path class="shadow" d="M29,19v6c0,2.2,1.8,4,4,4h10v2H33c-3.3,0-6-2.7-6-6v-6H29z"/> ' +
        '<path class="shadow" d="M44.7,29.8L44.7,29.8c0.4,0.4,0.4,1,0,1.4l-3.5,3.5c-0.4,0.4-1,0.4-1.4,0l0,0c-0.4-0.4-0.4-1,0-1.4l3.5-3.5C43.7,29.4,44.3,29.4,44.7,29.8z"/> ' +
        '<path class="shadow" d="M44.7,31.2L44.7,31.2c-0.4,0.4-1,0.4-1.4,0l-3.5-3.5c-0.4-0.4-0.4-1,0-1.4v0c0.4-0.4,1-0.4,1.4,0l3.5,3.5C45.1,30.2,45.1,30.9,44.7,31.2z"/> ' +
        '<g class="stroke"> ' +
        '<path class="stroke1" d="M50.5,8.9c-2.5,0-4.5,2-4.5,4.5v16c0,2.5,2,4.5,4.5,4.5s4.5-2,4.5-4.5v-16C55,11,53,8.9,50.5,8.9z M53,29.4c0,1.4-1.1,2.5-2.5,2.5S48,30.8,48,29.4v-16c0-1.4,1.1-2.5,2.5-2.5S53,12,53,13.4V29.4z"/> ' +
        '<path class="stroke1" d="M29.5,8.9h-2c-1.9,0-3.5,1.6-3.5,3.5s1.6,3.5,3.5,3.5h2c1.9,0,3.5-1.6,3.5-3.5S31.4,8.9,29.5,8.9z M29.5,13.9h-2c-0.8,0-1.5-0.7-1.5-1.5s0.7-1.5,1.5-1.5h2c0.8,0,1.5,0.7,1.5,1.5S30.3,13.9,29.5,13.9z"/> ' +
        '<path class="stroke1" d="M40.5,8.9h-2c-1.9,0-3.5,1.6-3.5,3.5s1.6,3.5,3.5,3.5h2c1.9,0,3.5-1.6,3.5-3.5S42.4,8.9,40.5,8.9z M40.5,13.9h-2c-0.8,0-1.5-0.7-1.5-1.5s0.7-1.5,1.5-1.5h2c0.8,0,1.5,0.7,1.5,1.5S41.3,13.9,40.5,13.9z"/> ' +
        '<path class="stroke1" d="M28,17.9v6c0,2.2,1.8,4,4,4h10v2H32c-3.3,0-6-2.7-6-6v-6H28z"/> ' +
        '<path class="stroke1" d="M43.7,28.8L43.7,28.8c0.4,0.4,0.4,1,0,1.4l-3.5,3.5c-0.4,0.4-1,0.4-1.4,0l0,0c-0.4-0.4-0.4-1,0-1.4l3.5-3.5C42.7,28.4,43.3,28.4,43.7,28.8z"/> ' +
        '<path class="stroke1" d="M43.7,30.2L43.7,30.2c-0.4,0.4-1,0.4-1.4,0l-3.5-3.5c-0.4-0.4-0.4-1,0-1.4v0c0.4-0.4,1-0.4,1.4,0l3.5,3.5C44.1,29.1,44.1,29.8,43.7,30.2z"/> ' +
        '</g> ' +
        '</g>',
    defaults: joint.util.deepSupplement({
        type: 'basic.Transposer',
        attrs: {
            size: {
                width: cc.ELEMENT_WIDTH,
                height: cc.ELEMENT_HEIGHT,
            },
            ".stroke": {},
            ".shadow": {
                'opacity': 0.3
            },
        }
    }, joint.shapes.basic.Generic.prototype.defaults)
})

class Transposer extends Element {
    constructor(...args) {
        super(...args)
        this._jointInstance = new JointTransposer(this.jointAttrs)
    }

    mixinAttr() {
        let mixin = {
            attrs: {
                '.stroke': {
                    fill: 'none'
                },
                '.shadow': {
                    fill: 'none'
                },
            }
        }
        $.extend(this.jointAttrs, mixin)
    }

    setColor(colorIndex) {
        super.setColor(colorIndex)
        let color = this.getColorFromIndex(colorIndex)
        this.jointInstance.attr('.stroke/fill', color)
        this.jointInstance.attr('.shadow/fill', color)
    }

}

export default Transposer